
<div class="container">
<h3>This is an example of a front end validated form:</h3>
<br>

	<form class="form-horizontal validationEnabled"  role="form" >
	  <div class="form-group">
		<label for="inputEmail1" class="col-lg-2 control-label" >Email</label>
		<div class="col-lg-10">
		  <input data-store="email" type="email" class="form-control validate[required,custom[email]]" id="inputEmail1" placeholder="Email">
		</div>
	  </div>
	  <div class="form-group">
		<label for="form1_1" class="col-lg-2 control-label"  >Name and Surname</label>
		<div class="col-lg-10">
		  <input data-store="nameAndSurname" class="form-control validate[required]" id="form1_1" placeholder="Name and Surname">
		</div>
	  </div>
	  <div class="form-group">
		<label for="form1_2" class="col-lg-2 control-label"  >Age</label>
		<div class="col-lg-10">
		  <input data-store="age" class="form-control validate[required,custom[integer],max[120]]" id="form1_2" placeholder="Only number less then 120">
		  
		</div>
	  </div>
	  <div class="form-group">
		<label for="form1_3" class="col-lg-2 control-label"  >Website</label>
		<div class="col-lg-10">
		  <input data-store="website" class="form-control validate[required,custom[url]]" id="form1_3" placeholder="Only valid url">
		</div>
	  </div>
	  <div class="form-group">
		<div class="col-lg-offset-2 col-lg-10">
		  <div class="checkbox">
			<label><input data-store="checkbox_1" type="checkbox"> Check box 1</label>
		  </div>
		  <div class="checkbox">
			<label><input data-store="checkbox_2" type="checkbox"> Check box 2</label>
		  </div>
		  <div class="checkbox">
			<label><input data-store="checkbox_3" type="checkbox"> Check box 3</label>
		  </div>
		</div>
	  </div>
	   <div class="form-group">
		<label class="col-lg-2 control-label">Some more stuff</label>
		<div class="col-lg-10">
		  <textarea data-store="sample_text_area" class="form-control" rows="3"></textarea>
		</div>
	  </div>
		<div class="form-group">
		<label class="col-lg-2 control-label">A nice select</label>
		<div class="col-lg-10">
		  <select data-store="select_example" class="form-control">
			  <option>1 option</option>
			  <option>2 option</option>
			  <option>3 option</option>
			  <option>4 option</option>
			  <option>5 option</option>
			</select>
		</div>
	  </div>
	
	<div class="form-group">
		<label class="col-lg-2 control-label">A multi select</label>
		<div class="col-lg-10">
			<select data-store="multi_select_example" multiple class="form-control">
			  <option>1 multioption</option>
			  <option>2 multioption</option>
			  <option>3 multioption</option>
			  <option>4 multioption</option>
			  <option>5 multioption</option>
			</select>
		</div>
	  </div>
	
	<div class="form-group">
		<label class="col-lg-2 control-label"></label>
		<div class="col-lg-10">

			<div class="radio">
			  <label>
				<input data-store="radio_test" type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
				Option one 
			  </label>
			</div>
			<div class="radio">
			  <label>
				<input data-store="radio_test" type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
				Option two 
			  </label>
			</div>
			<div class="radio">
			  <label>
				<input data-store="radio_test" type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
				Option three
			  </label>
			</div>
		</div>
	  </div>
	</form>
</div>